import React from 'react';
// import { Link } from 'react-router';
import { Menu,Dropdown,Icon } from 'antd';
import { connect } from 'react-redux';
import { logout }  from '../../utils/auth' ; 

import loadImage from './style/img/icon-only-text.png';

class AdminAccountMenu extends React.Component{
    handleLogoutClick(e){
        e.preventDefault();
        logout() ;
    }

    render(){
        const menu = (
            <Menu >
                <Menu.Item key="0" > 
                  <a href="#" onClick={this.handleLogoutClick}>
                    Log out 
                  </a>  
                </Menu.Item>
            </Menu>
            );
        return (
            <div >
                    <div className="custom-image" style={{ width:80, margin:"auto"}}>
                        <img alt="site-icon" width="100px" src={loadImage} />
                    </div>
                    <Dropdown overlay={menu}>
                        <a className="ant-dropdown-link" href="#">
                            admin: {this.props.current_user } <Icon type="down" /> 
                        </a>
                    </Dropdown>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
  return { current_user: state.auth.user.email}
}

export default connect(mapStateToProps)(AdminAccountMenu);